import React from "react";
import ReactDom, {render}  from 'react-dom'
// import {BaseProvider} from '@context/base'
// import utils from '@utils'

class ModalObject  {
  popState=(event)=>{
    this.hide()
  }
  show=(Component,config={})=>{
    window.addEventListener('popstate', this.popState);
    this.div = document.createElement('div')
    document.body.appendChild(this.div)
    render(<><Component {...config} /></>,this.div);
  }
  hide=()=>{
    if(this.div){
      window.removeEventListener('popstate', this.popState);
      ReactDom.unmountComponentAtNode(this.div);
      document.body.removeChild(this.div);
    }
  }
}
const CreateModal = {
  show:(component,config={})=>{
    let com = new ModalObject(component,config)
    com.show(component,{
      ...config,
      onOk:(data)=>{
        com.hide()
        if(typeof(config.onOk)==='function'){
          config.onOk(data)
        }
      },
      onCancel:(data)=>{
        com.hide()
        if(typeof(config.onCancel)==='function'){
          config.onCancel(data)
        }
      }
    })
  }
}
export default CreateModal
// const createModal=()=>{
//   let key = 1 
//   return (component)=>{
//     return {
//       show:()=>{
//         key++
//         let div = document.createElement('div')
//         div.id = id
//         document.body.appendChild(div);
//         render(<>{component}</>,div);
//       },
//       hide:()=>{
//         let div = document.getElementById(id)
//         if(div){
//           ReactDom.unmountComponentAtNode(div);
//           document.body.removeChild(div);
//         }
//       },
//     }
//   }
// }
// export default createModal()
